<template>
  <main class="main-content">
    <!-- 面包屑导航 -->
    <Breadcrumb />
    
    <!-- 路由视图 -->
    <div class="router-view-container">
      <router-view v-slot="{ Component }">
        <transition 
          name="page-slide" 
          mode="out-in"
        >
          <component :is="Component" :key="$route.fullPath" v-if="Component" />
        </transition>
      </router-view>
    </div>
  </main>
</template>

<script setup lang="ts">
// @ts-nocheck
import Breadcrumb from '@/components/navigation/Breadcrumb.vue'
</script>

<style scoped>
/* 主内容区 */
.main-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background-color: #ffffff; /* 根据用户偏好使用纯白色背景 */
}

.router-view-container {
  height: calc(100% - 30px);
}

/* 页面切换动画 */
.page-slide-enter-active {
  animation: slideInRight 0.3s ease;
}

.page-slide-leave-active {
  animation: slideOutLeft 0.3s ease;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}
</style>
